import React from "react";
import 高铝耐火砖1 from "./高铝耐火砖1.png";
import { allStore } from "../../../../store/AllStore";
import { Button, Modal, Table } from "antd";

export class HighAluminaRefractoryBricks extends React.Component {
  onView(dataSource, columns) {
    Modal.info({
      icon: null,
      okText: allStore.isEnglish ? "Close" : "关闭",
      title: allStore.isEnglish ? "Detailed Information" : "详细信息",
      content: (
        <div>
          <Table
            style={{ height: 400 }}
            scroll={{ y: 350 }}
            bordered
            pagination={false}
            dataSource={dataSource}
            columns={columns}
          ></Table>
        </div>
      ),
      width: 960,
    });
  }
  render() {
    const columns = [
      {
        title: allStore.isEnglish ? "Item" : "分类",
        dataIndex: "Item",
        key: "Item",
      },
      {
        title: "HA60",
        dataIndex: "HA60",
        key: "HA60",
      },
      {
        title: "HA70",
        dataIndex: "HA70",
        key: "HA70",
      },
      {
        title: "HA75",
        dataIndex: "HA75",
        key: "HA75",
      },
      {
        title: "HA80",
        dataIndex: "HA80",
        key: "HA80",
      },
    ];
    const dataSource = [
      {
        Item: "AL2O3(%)",
        HA60: "≥60",
        HA70: "≥70",
        HA75: "≥75",
        HA80: "≥80",
      },
      { Item: "SIO2(%)", HA60: "32", HA70: "22", HA75: "20", HA80: "≥18" },
      {
        Item: "Fe2O3(%)",
        HA60: "≤2.5",
        HA70: "≤2.0",
        HA75: "≤1.8",
        HA80: "≤1.8",
      },
      {
        Item: allStore.isEnglish ? "Refractoriness °C" : "耐火度°C",
        HA60: "≥1750",
        HA70: "≥1770",
        HA75: "≥1780",
        HA80: "≥1790",
      },
      {
        Item: allStore.isEnglish ? "Bulk density g/cm3" : "堆积密度 g/cm3",
        HA60: "2.35-2.4",
        HA70: "2.45-2.5",
        HA75: "2.5-2.55",
        HA80: "2.55-2.6",
      },
      {
        Item: allStore.isEnglish
          ? "Softening temperature under load"
          : "负载下的软化温度",
        HA60: "≥1450",
        HA70: "≥1510",
        HA75: "≥1520",
        HA80: "≥1530",
      },
      {
        Item: allStore.isEnglish ? "Apparent porosity%" : "表观孔隙率%",
        HA60: "≤24",
        HA70: "≤23",
        HA75: "≤22",
        HA80: "≤21",
      },
      {
        Item: allStore.isEnglish
          ? "Cold Crushing strength Mpa"
          : "冷挤压强度Mpa",
        HA60: "≥45",
        HA70: "≥50",
        HA75: "≥54",
        HA80: "≥60",
      },
    ];
    return (
      <div id="high-alumina-refractory-bricks" className="pcd-mod-layout">
        <div
          style={{
            width: 1080,
            display: "flex",
            alignItems: "center",
          }}
        >
          <div style={{ width: 470, height: 300 }}>
            <div
              style={{
                textAlign: "start",
                fontSize: 24,
                color: "#000",
                marginBottom: 24,
              }}
            >
              {allStore.isEnglish
                ? "High alumina refractory bricks"
                : "高铝耐火砖"}
            </div>
            <div style={{ textAlign: "start", marginBottom: 24 }}>
              {allStore.isEnglish
                ? "High alumina brick is a kind of refractories, the main composition of this refractory brick is Al2O3.Aluminum trioxide (Al2O3) containing more than 48% aluminum silicate refractories.High alumina bricks are produced with selected bauxite chamotte by advanced process and strict quality control. The main mineral components are corundum and mullite phases. It features excellent high temperature mechanics and chemical corrosion resistance."
                : "高铝砖是一种耐火材料，这种耐火砖的主要成分是Al2O3。三氧化二铝（Al2O3）含有48%以上的硅酸铝耐火材料。选用优质铝土矿熟料，采用先进的工艺，严格的质量控制，生产出高铝砖。主要矿物成分为刚玉和莫来石相。它具有优异的高温力学性能和耐化学腐蚀性。"}
            </div>
            <div style={{ textAlign: "start" }}>
              <Button
                type="primary"
                onClick={() => this.onView(dataSource, columns)}
              >
                {allStore.isEnglish ? "View details" : "查看详情"}
              </Button>
            </div>
          </div>
          <img
            style={{ width: 470, marginLeft: 140 }}
            alt=""
            src={高铝耐火砖1}
          ></img>
        </div>
      </div>
    );
  }
}
